<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>登录页面</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script> <!-- 确保引入 jQuery -->
    <script>
        function showUserLogin() {
            document.getElementById('userLogin').style.display = 'block';
            document.getElementById('adminLogin').style.display = 'none';
            document.getElementById('userRegister').style.display = 'none';
        }

        function showAdminLogin() {
            document.getElementById('userLogin').style.display = 'none';
            document.getElementById('adminLogin').style.display = 'block';
            document.getElementById('userRegister').style.display = 'none';
        }

        function showUserRegister() {
            document.getElementById('userLogin').style.display = 'none';
            document.getElementById('adminLogin').style.display = 'none';
            document.getElementById('userRegister').style.display = 'block';
        }

        $(document).ready(function() {
            // 用户登录表单提交
            $('#userLogin form').on('submit', function(e) {
                e.preventDefault();
                var formData = $(this).serialize();

                $.ajax({
                    url: '/user/login',
                    type: 'POST',
                    data: formData,
                    dataType: 'json',
                    success: function(response) {
                        if (response.success) {
                            // 登录成功，跳转到成功页面并携带用户名
                            window.location.href = response.redirectUrl + '?username=' + response.username;
                        } else {
                            // 登录失败，显示错误信息
                            $('#errorMessage').text(response.error);
                        }
                    },
                    error: function() {
                        $('#errorMessage').text('请求出错，请稍后重试');
                    }
                });
            });

            // 管理员登录表单提交
            $('#adminLogin form').on('submit', function(e) {
                e.preventDefault();
                var formData = $(this).serialize();

                $.ajax({
                    url: '/admin/login',
                    type: 'POST',
                    data: formData,
                    dataType: 'json',
                    success: function(response) {
                        if (response.success) {
                            window.location.href = response.redirectUrl + '?username=' + response.username;
                        } else {
                            $('#errorMessage').text(response.message);
                        }
                    },
                    error: function() {
                        $('#errorMessage').text('请求出错，请稍后重试');
                    }
                });
            });

            // 用户注册表单提交
            $('#userRegister form').on('submit', function(e) {
                e.preventDefault();
                var formData = $(this).serializeArray();
                var jsonData = {};
                $.each(formData, function() {
                    jsonData[this.name] = this.value;
                });

                $.ajax({
                    url: '/user/register',
                    type: 'POST',
                    contentType: 'application/json',
                    data: JSON.stringify(jsonData),
                    dataType: 'json',
                    success: function(response) {
                        if (response.success) {
                            alert(response.message);
                            // 修改为使用控制器的映射路径
                            window.location.href = '/login';
                        } else {
                            $('#errorMessage').text(response.message);
                        }
                    },
                    error: function() {
                        $('#errorMessage').text('请求出错，请稍后重试');
                    }
                });
            });
        });
    </script>
</head>
<body>
<h1>用户/管理员登录/注册</h1>
<p id="errorMessage" style="color: red;"></p> <!-- 添加错误信息显示元素 -->
<button onclick="showUserLogin()">用户登录</button>
<button onclick="showAdminLogin()">管理员登录</button>
<button onclick="showUserRegister()">用户注册</button>

<!-- 用户登录表单 -->
<div id="userLogin">
    <form action="#" th:action="@{/user/login}" method="post">
        <label for="loginType">登录方式:</label>
        <select id="loginType" name="loginType">
            <option value="phone">手机号</option>
            <option value="email">邮箱</option>
        </select><br><br>
        <label for="identifier">手机号/邮箱:</label>
        <input type="text" id="identifier" name="identifier" required><br><br>
        <label for="password">密码:</label>
        <input type="password" id="password" name="password" required><br><br>
        <input type="submit" value="用户登录">
    </form>
</div>

<!-- 管理员登录表单 -->
<div id="adminLogin" style="display: none;">
    <form action="#" th:action="@{/admin/login}" method="post">
        <label for="adminUsername">用户名:</label>
        <input type="text" id="adminUsername" name="adminUsername" required><br><br>
        <label for="adminPassword">密码:</label>
        <input type="password" id="adminPassword" name="adminPassword" required><br><br>
        <input type="submit" value="管理员登录">
    </form>
</div>

<!-- 用户注册表单 -->
<div id="userRegister" style="display: none;">
    <form action="#" th:action="@{/user/register}" method="post">
        <label for="uname">用户名:</label>
        <input type="text" id="uname" name="uname" required><br><br>
        <label for="password">密码:</label>
        <input type="password" id="registerPassword" name="password" required><br><br>
        <label for="phone">手机号:</label>
        <input type="text" id="phone" name="phone"><br><br>
        <label for="email">邮箱:</label>
        <input type="email" id="email" name="email"><br><br>
        <label for="address">地址:</label>
        <input type="text" id="address" name="address"><br><br>
        <input type="submit" value="用户注册">
    </form>
</div>
</body>
</html>